<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>通用模板</title>
</head>
<style>
  html .load-mask {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    font-size: 20px;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
  }

  .loading-text {
    
    font-size: 2.5rem;
    font-weight: bold;
    color: white;
    margin-bottom: 20px;
    margin-right: 8px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  }

  .dots {
    display: flex;
    justify-content: center;
    gap: 8px;
  }

  .dot {
    width: 12px;
    height: 12px;
    background-color: white;
    border-radius: 50%;
    opacity: 0.3;
  }

  .dot:nth-child(1) {
    animation: bounce 1.4s ease-in-out infinite;
  }

  .dot:nth-child(2) {
    animation: bounce 1.4s ease-in-out 0.2s infinite;
  }

  .dot:nth-child(3) {
    animation: bounce 1.4s ease-in-out 0.4s infinite;
  }

  @keyframes bounce {

    0%,
    80%,
    100% {
      transform: translateY(0);
      opacity: 0.3;
    }

    40% {
      transform: translateY(-15px);
      opacity: 1;
    }
  }
   @media (max-width: 480px) {
      .loading-text {
        font-size: 2rem;
      }
    }
</style>

<body>
  <div id="root"></div>
  <script type="module" src="/src/main.jsx"></script>
  <div class="load-mask">
    <span class="loading-text">加载中</span>
    <div class="dots">
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
    </div>
  </div>
</body>

</html>